import QtQuick 2.4
import QtQuick.Controls 2.12

Page {
    id:root
    background: Rectangle{
        color: "grey"
    }

    // VertTabBar.qml
    TabBar {
        id: tabBar
        width: 170
        anchors.left: parent.left
        anchors.leftMargin: 5
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 5
        anchors.top: parent.top
        anchors.topMargin: 5

        contentItem: ListView {
            model: tabBar.contentModel
            currentIndex: tabBar.currentIndex

            spacing: tabBar.spacing
            orientation: ListView.Vertical   // <<-- VERTICAL
            boundsBehavior: Flickable.StopAtBounds
            flickableDirection: Flickable.AutoFlickIfNeeded
            snapMode: ListView.SnapToItem

            highlightMoveDuration: 0
            highlightRangeMode: ListView.ApplyRange
            preferredHighlightBegin: 40
            preferredHighlightEnd: height - 40
        }
        TabButton {
            width: parent.width
            text: qsTr("Page 1")
        }
        TabButton {
            width: parent.width
            text: qsTr("Page 2")
        }
    }
    SwipeView {
        id: swipeView
        clip: true
        anchors.top: parent.top
        anchors.topMargin: 5
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 5
        anchors.left: tabBar.right
        anchors.leftMargin: 5
        anchors.right: parent.right
        anchors.rightMargin: 5
        currentIndex: tabBar.currentIndex

        Page1 {
        }

        Page2 {
        }

    }

}

/*##^##
Designer {
    D{i:0;autoSize:true;height:480;width:640}D{i:2;anchors_height:480}D{i:8;anchors_height:480;anchors_width:464;anchors_x:176;anchors_y:0}
}
##^##*/
